import React from 'react'
import Pagination from '../Pagination/Pagination'

function Module(params) {
    return <div class="rightcol " style={{ marginBottom: 10 }}>
        <div className='user' style={{ backgroundColor: "rgb(165,201,222)" }}>
            <span> <img title='' alt='' src="/img/imgUser.webp" /> <span className='h4'>用户：今晚吃什么</span> </span>
            <div class="thumb" style={{ float: "right" }}> {/* 好评或者差评 */}
                <img title='' alt='' src={true ? "/img/icon_thumbsUp_v6.png" : "/img/thumbs_upselected.png"} />
                <span>{true ? "推荐" : "不推荐"}</span>
                <img title='' alt='' style={{ float: "right" }} src="/img/icon_review_counted.png" />
            </div>
        </div>
        <div class="postedDate text-black-50" style={{ fontSize: 14 }}>  发布于：4 月 15 日 </div>

        <div class="content h6">
            (在宿舍看雪球，室友突然闯入)<br />
            我:唉，怎么又回调了。😡<br />
            室友:(推门而入)今天天气不错，去不去打羽球啊？🤓☝<br />
            我:(慌乱的按下Alt+Tab，迅速放下手柄，一声不吭的坐着)👐🙁<br />
            室友:你在干什么呢，还偷偷摸摸的(😏)(探过来头，紧接着看见我任务栏的雪球论坛。“哟，在登雪球论坛，让我看看你在看什么东东”，抢过鼠标点击雪球论坛图标，表情迅速放下🙁)<br />
            室友:你染上雪球了🤬！？？玩雪球的人什么症状你不知道吗！？🤯<br />
            <div class="gradient"></div>
        </div>
        <div class="posted" style={{ float: 'right', color: "rgb(97,192,244)", cursor: "pointer" }} >
            展开阅读
        </div>
        <hr />
        <div class="control_block">
            <span class="text review_was_helpful h6">这篇评测是否有价值？</span>
            <div class="vote_button_ctn" id="reviewButtonContainer162919185">
                <button type="button" class="btn btn-outline-primary"><span>是</span></button>
                <button type="button" class="btn btn-outline-primary"><span>否</span></button>
                <button type="button" class="btn btn-outline-primary"><span>欢乐</span></button>
                <button type="button" class="btn btn-outline-primary"><span><img title='' alt='' src="/img/award_icon.svg" class="reward_btn_icon" /> 奖励</span></button>
            </div>
        </div>
        <div class="vote_info h6">
            <div>有 144 人觉得这篇评测有价值</div>
            <div class="commentCount" style={{ float: 'right', cursor: "pointer" }}> 点击查看回复</div>
            <div>有 244 人觉得这篇评测很欢乐</div>
        </div>
        <div style={{ height: 15, backgroundColor: "rgb(239,240,241)" }}></div>
        <br />
    </div>
}
export default function Comment() {
    const commodityComment = {
        summarySection: [{
            "title": "总体评测：",
            "reviewSummary": "特别好评",
            "content": "(140,205 篇评测)"
        }, {
            "title": "最近评测：",
            "reviewSummary": "特别好评",
            "content": "(2,105 篇评测)"
        }]
    }
    return (
        <div className='Comment text-body' style={{ textAlign: "left" }}>
            <hr /> <span>用户评测</span>
            <div id="review_histograms_container" class="has_data collapsed shadow p-3 mb-5 bg-white rounded">
                {<div class="user_reviews_summary_bar">
                    <div class="summary_section">
                        <div class="title">总体评测：</div>
                        <span class="game_review_summary positive h4" style={{ color: "rgb(97,192,244)" }}>特别好评</span>
                        <span>(114,514 篇评测)</span>
                    </div>
                </div>}
                <hr />
                {/* <div id="review_histogram_rollup_container" class="review_histogram">
                        <div id="review_histogram_rollup" style={{ padding: "0px", position: "relative" }}>
                        </div>
                    </div> */}
                {<div class="user_reviews_summary_bar">
                    <div class="summary_section">
                        <div class="title">最近评测：</div>
                        <span class="game_review_summary positive h4" style={{ color: "rgb(97,192,244)" }}>特别好评</span>
                        <span>(2,024 篇评测)</span>
                    </div>
                </div>}
            </div>
            <div className='shadow p-3 mb-5 bg-white rounded'>
                <Module />
                <Module />
                <Module />
                {/* 分页 */}
                <Pagination />
            </div>
        </div >







    )
}


